<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <div class="container">
        <main>
            <!-- 首页 -->
            <div class="index">
                <!-- 轮播 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide index-swiper1"></div>
                        <div class="swiper-slide index-swiper2"></div>
                        <div class="swiper-slide index-swiper3"></div>
                    </div>
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>
                </div>

                <div class="con">
                    <!-- 排名 -->
                    <div class="rank">
                        <img src="./imgs/index-card-rank.png" alt="">
                        <p>今日排名</p>
                        <span>0</span>
                    </div>
                    <!-- 打卡 -->
                    <div class="card">
                        <img src="./imgs/index-card-sum.png" alt="">
                        <p>累计打卡<i>23</i>天</p>
                        <span>今日打卡</span>
                    </div>
                    <!-- 数据 -->
                    <a href="./run-data.html" class="data">
                        <p>运动数据</p>
                    </a>
                    <!-- 徽章 -->
                    <div class="badge">
                        <p>累计运动徽章</p>
                        <span><i>3</i>枚</span>
                        <img src="./imgs/index-card-badge.png" alt="">
                    </div>
                    <!-- 训练 -->
                    <a href="./sports.html" class="train">
                        <p>课程训练</p>
                    </a>
                    <!-- 跑步 -->
                    <div class="run">
                        <p>户外跑步</p>
                    </div>
                </div>
            </div>
        </main>
        <div id="tab"></div>
    </div>
</body>

</html>
